<template>
    <div class="content">
        <nav>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../../assets/img/swiper1.webp" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/img/swiper2.webp" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/img/swiper3.webp" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/img/swiper4.webp" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/img/swiper5.webp" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/img/swiper6.webp" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!--&lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
                <!--<div class="swiper-button-prev"></div>-->
                <!--<div class="swiper-button-next"></div>-->

                <!--&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
                <!--<div class="swiper-scrollbar"></div>-->
            </div>
        </nav>
        <aside>
            <a href="#">
                <p class="pin">品牌特卖</p>
                <p class="jiu">9.9元秒不停</p>
                <img src="../../assets/img/ccc1.webp" alt="">
            </a>
            <a href="#">
                <p class="pin">限时抢购</p>
                <p class="jiu">19.9元冰点价</p>
                <img src="../../assets/img/ccc2.webp" alt="">
            </a>
            <a href="#">
                <p class="pin">万人火拼</p>
                <p class="jiu">急速降价</p>
                <img src="../../assets/img/ccc3.webp" alt="">
            </a>
        </aside>
        <div class="shi">
            <span class="dian">10点快抢·距结束</span>
            <span class="daoall">
            <span class="hour dao">00</span> :
            <span class="second dao" id="minutes">{{minute}}</span> :
            <span class="ms dao" id="seconds">{{second}}</span>
        </span>
            <img src="../../assets/img/more.png" alt="">
        </div>
        <ul class="product">
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
            <li>
                <img src="../../assets/img/caicui.webp" alt="">
                <p class="type">秋冬 红石榴护肤五件套</p>
                <p class="price"><span class="nprice">￥39.00</span> <span class="oprice">￥98.00</span></p>
            </li>
        </ul>
        <div class="chao">超实惠-促销直达</div>
        <div class="shihui">
            <div class="shihui-top">
                <div class="top-left">
                    <p class="qiu">秋款上新</p>
                    <p class="bao">爆款热卖img</p>
                    <img src="../../assets/img/baokuan.webp" alt="">
                </div>
                <div class="top-right">
                    <div class="rightall">
                        <div>
                            <span class="qiu">显瘦套装</span>
                            <span class="bao">瘦身穿搭不过39</span>
                        </div>
                        <img src="../../assets/img/qunzi.webp" alt="">
                    </div>
                    <div class="rightall">
                        <div>
                            <span class="qiu">裙裤推荐</span>
                            <span class="bao">进阶女神必备</span>
                        </div>
                        <img src="../../assets/img/changqun.webp" alt="">
                    </div>
                </div>
            </div>
            <div class="shihui-bottom">
                <div class="bottomlist">
                    <div class="qiu">热销美鞋</div>
                    <div class="bao">39元快抢</div>
                    <img src="../../assets/img/shoose.webp" alt="">
                </div>
                <div class="bottomlist">
                    <div class="qiu">温暖换新</div>
                    <div class="bao">唤醒你的秋冬</div>
                    <img src="../../assets/img/dayi.webp" alt="">
                </div>
                <div class="bottomlist">
                    <div class="qiu">全网底价好货</div>
                    <div class="bao">39封顶</div>
                    <img src="../../assets/img/kouhong.webp" alt="">
                </div>
            </div>
        </div>
        <div class="imgs">
            <img src="../../assets/img/chihuo.webp" alt="">
            <img src="../../assets/img/jiaju.webp" alt="">
            <img src="../../assets/img/meizhuang.webp" alt="">
            <img src="../../assets/img/peishi.webp" alt="">
            <img src="../../assets/img/pinpai.webp" alt="">
            <img src="../../assets/img/pinpin.webp" alt="">
            <img src="../../assets/img/rexiao.webp" alt="">
        </div>
        <p class="remen">热门市场</p>
        <ul class="listbox">
            <li><img src="../../assets/img/list1.webp" alt="">金秋季</li>
            <li><img src="../../assets/img/list2.webp" alt="">初冬上新</li>
            <li><img src="../../assets/img/list3.webp" alt="">套装</li>
            <li><img src="../../assets/img/list4.webp" alt="">卫衣</li>
            <li><img src="../../assets/img/list5.webp" alt="">上衣</li>
            <li><img src="../../assets/img/list6.webp" alt="">小白鞋</li>
            <li><img src="../../assets/img/list7.webp" alt="">连衣裙</li>
            <li><img src="../../assets/img/list8.webp" alt="">裤子</li>
            <li><img src="../../assets/img/list9.webp" alt="">美包</li>
            <li><img src="../../assets/img/list10.webp" alt="">短靴</li>
            <li><img src="../../assets/img/list11.webp" alt="">美妆</li>
            <li><img src="../../assets/img/list12.webp" alt="">男友</li>
            <li><img src="../../assets/img/list13.webp" alt="">内衣袜子</li>
            <li><img src="../../assets/img/list14.webp" alt="">配饰</li>
            <li><img src="../../assets/img/list15.webp" alt="">零食</li>
            <li><img src="../../assets/img/list16.webp" alt="">家居百货</li>
        </ul>
        <p class="remen cai">猜你喜欢</p>
        <ul class="productlist">
            <li>
                <img src="../../assets/img/product01.webp" alt="">
                <p><span>￥89.00</span><span>1.1w <img src="../../assets/img/star.png" alt=""></span></p>
            </li>
            <li>
                <img src="../../assets/img/product01.webp" alt="">
                <p><span>￥89.00</span><span>1.1w <img src="../../assets/img/star.png" alt=""></span></p>
            </li>
            <li>
                <img src="../../assets/img/product01.webp" alt="">
                <p><span>￥89.00</span><span>1.1w <img src="../../assets/img/star.png" alt=""></span></p>
            </li>
            <li>
                <img src="../../assets/img/product01.webp" alt="">
                <p><span>￥89.00</span><span>1.1w <img src="../../assets/img/star.png" alt=""></span></p>
            </li>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
import Vue from "vue";
    export default {
        data(){
            return{
                minute:59,
                second:59
            }
        },
        created:function () {
            this.time();
        },
        methods:{
            time:function () {
                var minutes=59;
                var seconds=59;
                var ms=100;
                var self=this;
                setInterval(function () {
//                    self.second=seconds;
//                    self.minute=minutes;
                    Vue.set([self.second],'second',seconds);
                    Vue.set([self.minute],'minute',minutes);
                    ms--;
                    if(ms<=0) {
                        ms = 100;
                        seconds--;
                        if (seconds <= 0) {
                            minutes--;
                            seconds = 59;

                        }
                    }
                },10);
            },
        },

    }
</script>
<style scoped>
    .content{
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        background-color:#F6F6F6;
    }
    nav{
        width: 100%;

    }
    nav img{
        width: 100%;
    }
    .swiper-pagination{
        position: absolute!important;
        bottom: -0.2rem!important;
        left: -1.3rem!important;
    }
    aside{
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding:0.1rem 0rem;
        background: white;
        margin-bottom: 0.1rem;
    }
    aside a{
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    aside a::after{
        content: '';
        width: 1px;
        height: 81.2%;
        border-right: 1px solid #eee;
        position: absolute;
        right: -0.3rem;
        top: 10%;
    }
    aside .pin{
        font-size: 0.14rem;
        color: #ff6801;
        white-space:nowrap;
        margin-bottom: 0.05rem;
    }
    aside .jiu{
        font-size: 0.12rem;
        color: #666666;
        white-space:nowrap;
        margin-bottom: 0.05rem;
    }
    aside a img{
        width: 0.5rem;
        height: 0.5rem;
    }
    .shi{
        overflow: hidden;
        background-color: white;
        box-sizing: border-box;
        padding: 0.15rem 0.17rem 0.1rem 0.15rem;
        height: auto;
        display: flex;
    }
    .shi .dian{
        font-size: 0.15rem;
    }
    .shi .daoall{
        font-size: 0.13rem;
        margin-left: 0.1rem;
        white-space: nowrap;
    }
    .shi .daoall .dao{
        color: #ffffff;
        width: 0.2rem;
        height: 0.2rem;
        background-color: black;
        border-radius: 5px;
        line-height: 0.2rem;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
    }
    .shi img{
        float: right;
        height: 0.12rem;
        vertical-align: middle;
        margin-left: 0.8rem;
        margin-top: 0.05rem;
    }
    .product{
        float: left;
        padding-left: 0.15rem;
        width: 100%;
        background: white;
        overflow-x: auto;
    }
    .product{
        overflow-x: auto;
        width: 100%;
        display: flex;
        box-sizing: border-box;
    }
    .product li{
        float: left;
        width: 0.9rem;
        height: 1.45rem;
        margin-right: 0.1rem;
    }
    .product li img{
        width: 0.8rem;
        height: 0.8rem;
        margin: 0.1rem auto;
    }
    .product li .type{
        color: #666;
        font-size: 0.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
    .product li .price{
        display: flex;
        justify-content: space-around;
    }
    .product li .nprice{
        font-size: 0.13rem;
        color: #F25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product li .oprice{
        color: #888;
        line-height: 0.17rem;
        font-size: 0.1rem;
        text-decoration: line-through;
    }
    .chao{
        width: 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        background: #fff;
        color: #333;
        text-indent: 0.2rem;
        font-size: 0.14rem;
        font-weight: normal;
        float: left;
        margin-top: 0.1rem;
    }
    .shihui{
        overflow: hidden;
        width: 100%;
        border-top: 1px solid #E5E5E5;
        border-bottom:1px solid #e5e5e5;
        background-color: white;
    }
    .shihui .shihui-top{
        display: flex;
        justify-content: space-between;
    }
    .shihui-top .top-left{
        border-bottom:1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        width: 100%;
    }
    .shihui .qiu{
        font-size:0.14rem;
        margin-top: 0.2rem;
        line-height:0.2rem;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
    }
    .shihui .bao{
        color: #ff5f7e;
        font-size: 0.12rem;
        line-height: 0.165rem;
        text-align: center;
    }
    .shihui-top .top-left img{
        width: 1rem;
        height: 1rem;
        margin: 0 auto;
    }
    .shihui-top .top-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .shihui-top .top-right img{
        width: 42%;
        float: right;
    }
    .shihui-top .top-right .rightall{
        border-bottom:1px solid #e5e5e5;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .shihui-top .top-right .rightall div{
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
    }
    .shihui-top .top-right .rightall .qiu{
        margin-top: 0rem;
        text-indent: -0.1rem;
    }
    .shihui .shihui-bottom{
        display: flex;
        justify-content: space-around;
    }
    .shihui .shihui-bottom .bottomlist:nth-child(2){
        border-left:1px solid #e5e5e5;
        border-right:1px solid #e5e5e5;
        width: 33.33%;
    }
    .shihui .shihui-bottom img{
        width: 0.8rem;
        height: 0.8rem;
        margin: 0 auto;
    }
    .imgs{
        margin-top: 0.1rem;
        padding-left: 0.1rem;
        overflow-x: auto;
        display: flex;
        box-sizing: border-box;
    }
    .imgs img{
        width: 1.2rem;
        height: 0.8rem;
        margin-right: 0.1rem;
        float: left;
    }
    .remen{
        background-image: url("../../assets/img/xian.png");
        width: 100%;
        line-height: 0.4rem;
        background-color: white;
        background-repeat: no-repeat;
        background-position: center center;
        font-size: 0.14rem;
        text-align: center;
        background-size: 1.8rem 0.05rem;
    }
    .cai{
        background-color: transparent;
        line-height: 0.5rem;
    }
    .listbox{
        display: flex;
        flex-wrap: wrap;
        background-color: white;
    }
    .listbox li{
        width:25%;
        text-align: center;
        font-size: 0.12rem;
        line-height: 0.2rem;
        margin: 0.1rem 0rem;
    }
    .listbox li img{
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto;
    }
    .productlist{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .productlist li{
        width: 48%;
        margin: 1%;
        background-color: white;
    }
    .productlist li img{
        width: 100%;
    }
    .productlist li p{
        width: 100%;
        padding: 0.1rem;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }
    .productlist li p span:first-child{
        font-size: 0.14rem;
    }
    .productlist li p span:last-child{
        font-size: .12rem;
        color: #999;
    }
    .productlist li p span img{
        width: 0.12rem;
        height: 0.12rem;
        float: right;
        vertical-align: middle;
        margin-top: 0.02rem;
    }
</style>